TanStack Store
Framework agnostic type-safe store w/ reactive framework adapters
GPT-4.icon
TanStack Store（Signalsライクな仕組み）は、リアクティブで効率的な状態管理をフレームワークに依存せずに使えるのが最大の利点です。以下に、具体的に何が便利かをまとめます：
✅ 1. 状態をリアクティブに扱える
Store, Derived, Effectを使うことで、状態の変更に自動で追従するコードが書けます。React のような UI フレームワークがなくても、依存関係に応じて自動更新される仕組みを自前で構築できます。
code:ts
const count = new Store(1);
const double = new Derived({
fn: () => count.state * 2,
});
double.mount();
count.setState(() => 5);
console.log(double.state); // 自動的に10になる
✅ 2. 手動の subscribe ではなく、宣言的に副作用を管理できる
Effect を使えば、副作用（ログ出力、APIコールなど）を宣言的に依存リスト付きで管理できます。
code:ts
const effect = new Effect({
fn: () => console.log('count:', count.state),
eager: true
});
effect.mount();
これは依存トラッキング付きの useEffect 的な仕組みを、どんな環境でも使えるようにしたものです。
✅ 3. 依存の明示 & 高効率な更新
Derived や Effect は、依存リスト（deps）を明示する必要があります。これにより、変更がない限り不要な再計算を避けられます。
React の useEffect や useMemo の依存配列と似ていますが、それを ライブラリレベルで実装可能になっているのが特徴です。
---
✅ 4. Batching がある
更新をバッチすることで、複数回の .setState() を1回の通知にまとめられる。パフォーマンス向上や不要な再描画の防止に有効です。
code:ts
batch(() => {
countStore.setState(() => 1);
countStore.setState(() => 2);
});
✅ 5. フレームワーク非依存・他と組み合わせ可能
Vue/React/Svelteなど、どんなフレームワークとでも組み合わせ可能。また、フレームワークに縛られずに状態管理ロジックを共有可能です。
---
✅ 6. 状態遷移を柔軟に制御できる
updateFn で前の状態に依存した更新が可能
onUpdate で副作用のような処理をフックできる
prevVal, prevDepVals などの引数で、過去状態に基づいた計算が可能